<template>
  <div class="app-container">
    <el-tabs v-model="activeName" @tab-click="getInfo">
      <el-tab-pane label="取药指引" name="mc_cabinet_guide">
        <el-form
          ref="guideForm"
          :model="guideForm"
          :rules="guideRules"
          label-width="80px"
        >
          <el-form-item label="封面" prop="img">
            <Image-upload v-model="guideForm.img" :limit="1" :file-size="50" />
          </el-form-item>
          <el-form-item label="视频" prop="video">
            <Video-upload v-model="guideForm.video" :limit="1" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm">确 定</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="厂家信息" name="mc_cabinet_manufacturer">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form
              ref="manuForm"
              :model="manuForm"
              :rules="manuRules"
              label-width="80px"
            >
              <el-form-item label="厂家名称" prop="name">
                <el-input
                  v-model="manuForm.name"
                  placeholder="请输入厂家名称"
                  maxlength="30"
                  clearable
                />
              </el-form-item>
              <el-form-item label="客服电话" prop="service">
                <el-input
                  v-model="manuForm.service"
                  placeholder="请输入客服电话"
                  maxlength="20"
                  clearable
                />
              </el-form-item>
              <el-form-item label="在线时间" prop="onlineTime">
                <el-input
                  v-model="manuForm.onlineTime"
                  placeholder="请输入在线时间"
                  maxlength="20"
                  clearable
                />
              </el-form-item>
              <el-form-item label="许可证" prop="permit">
                <el-input
                  v-model="manuForm.permit"
                  placeholder="请输入许可证"
                  maxlength="50"
                  clearable
                />
              </el-form-item>
              <el-form-item label="厂家地址" prop="address">
                <el-input
                  v-model="manuForm.address"
                  placeholder="请输入厂家地址"
                  maxlength="50"
                  clearable
                />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm">确 定</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getCabinetConfig, updateCabinetConfig } from "@/api/mc/cabinetConfig";

export default {
  name: "CabinetConfig",
  data() {
    return {
      activeName: "mc_cabinet_guide", // 当前tab
      guideForm: {
        img: "", // 取药指引图片
        video: "", // 取药指引视频
      },
      guideRules: {
        img: [{ required: true, message: "封面不能为空", trigger: "blur" }],
        video: [{ required: true, message: "视频不能为空", trigger: "blur" }],
      },
      manuForm: {
        name: "", // 厂家名称
        service: "", // 客服信息
        onlineTime: "", // 在线时间
      },
      manuRules: {
        name: [{ required: true, message: "厂家名称不能为空", trigger: "blur" }],
        service: [{ required: true, message: "客服信息不能为空", trigger: "blur" }],
      },
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    /** 查询柜机公共配置列表 */
    getInfo() {
      getCabinetConfig(this.activeName).then((res) => {
        if (res.data.configKey == "mc_cabinet_guide") {
          this.guideForm = JSON.parse(res.data.value);
          console.log(this.guideForm);
        } else {
          this.manuForm = JSON.parse(res.data.value);
        }
      });
    },
    // 表单重置
    reset() {
      this.guideForm = {
        img: null,
        video: null,
      };
      this.resetForm("guideForm");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["guideForm"].validate((valid) => {
        if (valid) {
          let data = {
            configKey: this.activeName,
            value:
              this.activeName == "mc_cabinet_guide"
                ? JSON.stringify(this.guideForm)
                : JSON.stringify(this.manuForm),
          };
          updateCabinetConfig(data).then((res) => {
            this.$modal.msgSuccess("修改成功");
          });
        }
      });
    },
  },
};
</script>
